<template>
  <div class="seat-screen main">
    <div class="seat-screen-title">
      <span>
        <el-icon style="vertical-align: middle"> <Avatar /> </el-icon
        >&nbsp;占用
      </span>
      <span>
        <el-icon style="vertical-align: middle">
          <UserFilled /> </el-icon
        >&nbsp;已预约
      </span>
    </div>
    <h3>座位表</h3>
    <div class="seat-chart" v-if="seatList1">
      <ul v-for="(row, rowindex) in seatList1" :key="rowindex">
        <li
          ref="lis"
          v-for="(seat, columnindex) in row"
          :key="columnindex"
          :class="seat ? 'seat' : 'none'"
          @click="clickFn(seat)"
        >
          <el-icon v-if="seat && seat.seatdata.status === 2">
            <Avatar />
          </el-icon>
          <el-icon v-else-if="seat && seat.seatdata.status === 1">
            <UserFilled />
          </el-icon>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { Avatar, UserFilled } from '@element-plus/icons-vue'
import { useSeatStore } from '../stores/seat.js'
import { ref, defineEmits } from 'vue'
const seatStore = useSeatStore()

function clickFn(seat) {
  //如果样式为none，不发送点击事件
  if (!seat) return
  emits('clickSeat', seat)
}
//发送点击位置
const emits = defineEmits(['clickSeat'])

const fetchSeatInfo = async () => {
  await seatStore.getSeatInfoFn()
}

const fetchReservationInfo = async () => {
  await seatStore.getSeatreservationInfoFn()
}

const seatLayout = ref([
  [1, 0, 1, 1, 1, 1, 1, 1],
  [1, 0, 1, 1, 1, 1, 1, 1],
  [1, 0, 0, 0, 0, 0, 0, 0],
  [1, 1, 1, 1, 1, 1, 1, 1]
])

//判断是否为座位
const isSeat = (seat) => {
  return seat === 1
}
//找到对应的预约信息，没有返回null
const findReservation = (seat) => {
  const reservation = seatStore.reservationInfo.find((item) => {
    return item.seat_id === seat.id
  })
  return reservation ? reservation : null
}
// 座位对象
class Seat {
  constructor(seatdata, reservationdata) {
    this.seatdata = seatdata
    this.reservationdata = reservationdata
  }
  //座位状态
  getStatus() {
    if (this.seatdata.status === 0) {
      return '空闲'
    } else if (this.seatdata.status === 1) {
      return '已预约'
    } else if (this.seatdata.status === 2) {
      return '已占用'
    }
  }
  //获取座位id
  getSeatId() {
    return this.seatdata.id
  }
  //获取预约人名字
  getReservationName() {
    return this.reservationdata ? this.reservationdata.nickname : null
  }
  //获取预约时长
  getReservationTime() {
    return this.reservationdata
      ? this.reservationdata.reservation_time
      : null
  }
  //获取预约开始时间
  getReservationStartTime() {
    return this.reservationdata
      ? this.reservationdata.reservation_date
      : null
  }
}
let seatList1 = ref([])
let seatList = ref([])
//将座位信息转换为对象,并放到对应的位置
const transitionSeat = () => {
  let i = 0
  seatLayout.value.forEach((row, rowIndex) => {
    seatList.value.push([])
    row.forEach((seat) => {
      if (isSeat(seat)) {
        seatList.value[rowIndex].push(
          new Seat(
            seatStore.seatInfo[i],
            findReservation(seatStore.seatInfo[i])
          )
        )
        i++
      } else {
        seatList.value[rowIndex].push(null)
      }
    })
  })
  seatList1.value = seatList.value
}

async function initData() {
  await fetchSeatInfo()
  await fetchReservationInfo()
  transitionSeat()
}

initData()
</script>

<style scoped>
.seat-screen {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.seat-screen-title {
  margin: 20px 0;
  display: flex;
  width: 50%;
  justify-content: space-around;
}

.seat-screen ul {
  width: 100%;
  display: flex;
  justify-content: center;
}

.seat-screen ul li {
  list-style: none;
}

.seat {
  width: 25px;
  height: 25px;
  border: 1px solid rgb(65, 59, 59);
  border-radius: 20%;
  margin: 5px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.none {
  width: 25px;
  height: 25px;
  margin: 5px;
  border: 1px solid rgb(65, 59, 59, 0);
}
</style>
